<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>宿管及其他员工显示</title>
</head>
<body>
<jsp:include page="../common/css_js.jsp"/>
<div class="page-container">
    <div class="mt-3  mb-3">
        <h3>员工基本信息</h3>
        <a class="btn btn-success" href="javascript:" onclick="add()">添加</a>
    </div>
    <table class="table" id="myTable">
        <thead>
        <tr>
            <th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>楼楼房号</th><th>职位</th>
            <th>家庭地址</th><th>联系方式</th><th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${EMPLOYEE.list}" var="one" varStatus="sta">
            <tr>
                <td>${one.empId}</td>
                <td>${one.empName}</td>
                <td>${one.empAge}</td>
                <td>${one.empSex}</td>
                <td>${one.buildId}</td>
                <td>${one.empJob}</td>
                <td>${one.empAddress}</td>
                <td>${one.empTel}</td>

                <td>
                    <a class="btn btn-success" href="javascript:" onclick="update(${one.buildId})">修改</a>
                    <a class="btn btn-danger btn-sm" href="javascript:;" onclick="del(${one.empId})">删除</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>

        <!--分页功能-->
        <script>
            var pageSize = ${EMPLOYEE.pageSize};
            var pageNumber = ${EMPLOYEE.currentPage};
            var totalPage = ${EMPLOYEE.totalPage};

            function firstPage() {
                if (pageNumber != 1) {
                    pageNumber = 1;
                    gotoPage();
                }
            }

            function prevPage() {
                if (pageNumber > 1) {
                    pageNumber--;
                    gotoPage();
                }
            }
            function nextPage() {
                if (pageNumber < totalPage) {
                    pageNumber++;
                    gotoPage();
                }
            }
            function lastPage() {
                if (pageNumber != totalPage) {
                    pageNumber = totalPage;
                    gotoPage();
                }
            }
            function gotoPage() {
                window.location.href = "${pageContext.request.contextPath}/employee/getEmployee?pageSize=" +
                    pageSize + "&pageNumber=" + pageNumber;
            }
        </script>
    </table>
    <div>
        <button onclick="firstPage()">首页</button>
        <button onclick="prevPage()">上一页</button>
        <button onclick="nextPage()">下一页</button>
        <button onclick="lastPage()">尾页</button>
        <span>当前第${EMPLOYEE.currentPage}页，共${EMPLOYEE.totalPage}页，共${EMPLOYEE.totalSize}条记录</span>
    </div>
</div>


<!-- 添加用的模态框 -->
<div class="modal fade" id="addModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">添加员工</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form  method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label>序号</label>
                        <input type="text" name="empId" id="empId1" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" name="empName" id="empName1" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>年龄</label>
                        <input type="text" name="empAge" id="empAge1" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <input type="text" name="empSex" id="empSex1" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>楼房号</label>
                        <input type="text" name="buildId" id="buildId1" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>职位</label>
                        <input type="text" name="empJob" id="empJob1" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>家庭地址</label>
                        <input type="text" name="empAddress" id="empAddress1" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>联系方式</label>
                        <input type="text" name="empTel" id="empTel1" class="form-control">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="add_do()">提交</button>
            </div>
        </div>
    </div>
</div>


<!-- 修改用的模态框 -->
<div class="modal fade" id="updateModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">修改员工信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label>序号</label>
                        <input type="text" name="empId" id="empId" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" name="empName" id="empName" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>年龄</label>
                        <input type="text" name="empAge" id="empAge" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <input type="text" name="empSex" id="empSex" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>楼房号</label>
                        <input type="text" name="buildId" id="buildId" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>职位</label>
                        <input type="text" name="empJob" id="empJob" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>家庭地址</label>
                        <input type="text" name="empAddress" id="empAddress" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>联系方式</label>
                        <input type="text" name="empTel" id="empTel" class="form-control">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="update_do()">提交</button>
            </div>
        </div>
    </div>
</div>
<script>
    //添加用的模态框
    function add(empId) {
        $("#addModal").modal("show");//弹模态框
    }
    function add_do() {
        $.ajax({
            url: "addEmployee",
            method: "post",
            dataType: "json",
            data: {
                empId: $("#empId1").val(),
                empName: $("#empName1").val(),
                empAge: $("#empAge1").val(),
                empSex: $("#empSex1").val(),
                buildId: $("#buildId1").val(),
                empJob: $("#empJob1").val(),
                empAddress: $("#empAddress1").val(),
                empTel: $("#empTel1").val(),
            },
            success: function (data) {
                console.log(data);
                alert(data.msg)
            }
        });
    }

    // 修改用的模态框
    function update(empId) {
        $("#updateModal").modal("show");
        //法一：把表格的第id行的记录拿出来，反填到模态框中
        $("#empId").val($("#b_" + empId + " .empId").text());
        $("#empName").val($("#b_" + empId + " .empName").text());
        $("#empAge").val($("#b_" + empId + " .empAge").text());
        $("#empSex").val($("#b_" + empId + " .empSex").text());
        $("#buildId").val($("#b_" + empId + " .buildId").text());
        $("#empJob").val($("#b_" + empId + " .empJob").text());
        $("#empAddress").val($("#b_" + empId + " .empAddress").text());
        $("#empTel").val($("#b_" + empId + " .empTel").text());
    }

    function update_do() {
        $.ajax({
            url: "updateEmployee",
            method: "post",
            data: {
                empId: $("#empId").val(),
                empName: $("#empName").val(),
                empAge: $("#empAge").val(),
                empSex: $("#empSex").val(),
                buildId: $("#buildId").val(),
                empJob: $("#empJob").val(),
                empAddress: $("#empAddress").val(),
                empTel: $("#empTel").val(),
            },
            success: function (data) {
                console.log(data);
                if ('ok' == data.msg) {
                    alert("修改成功");
                    location.reload();
                } else alert("修改失败");
            }
        });
    }
</script>

<script>
    function del(empId) {
        if (confirm("你真的要删除吗？")) {
            location.href = "delEmployee?empId=" + empId;

        }
    }
</script>

<link href="<%=path%>/static/jquery/jquery.dataTables.min.css" rel="stylesheet">
<script src="<%=path%>/static/jquery/jquery.dataTables.min.js"></script>
<script>
    function change() {
        $('#myTable').DataTable();
    }
</script>
</body>
</html>
